<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #demodiv {
      width: 800px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid red;
      overflow: hidden;
    }

    #demodiv > div {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      left: 0px;
    }

    #demodiv > div > div {
      float: left;
      width: 200px;
    }

    #demodiv > div > div > img {
      width: 200px;
      height: 300px;
    }
  </style>
</head>
<body>
<div id="demodiv">
  <div></div>
</div>
<script>
  // 让图片显示在页面中
  var newhtml = "";
  for (var i = 1; i < 16; i++) {
    newhtml += "<div><img src='../../img/4.27/" + i + ".jpg'></div>"
  }
  document.getElementById("demodiv").children[0].innerHTML = newhtml;
  // 让图片动起来   给存放图片的大div设置定位position:relative,该div左移时,后面图片会一次显示出来
  // 设置定时函数,当图片定位向左移动200时候,存放图片的div宽度就自增200
  var leftnum = 0;
  var widthnum = 1200;
  var i = 0;
  setInterval(function () {
    leftnum--;
    document.getElementById("demodiv").children[0].style.left = leftnum + "px";
    if (leftnum % 200 == 0) {
      widthnum += 200;
      document.getElementById("demodiv").children[0].style.width = widthnum + "px";
      i++;
      if (i == 16) {
        i = 1;
      }
      var newdiv = document.createElement("div");
      var newimg = document.createElement("img");
      newimg.src = '../../img/4.27/' + i + '.jpg';
      newdiv.appendChild(newimg);
      document.getElementById("demodiv").children[0].appendChild(newdiv);
    }
  }, 10)

</script>
</body>
</html>
